<template>
  <div class="msg">
    <div class="messageList" v-if="flag==='1'?true:false">
      <ul>
        <li class="mailLi" @mouseleave="mouseleave" @mouseenter="mouseenter">
          <div class="avatar">
            <img src="@/assets/images/portrait.png" alt="" />
          </div>
          <div class="inFo">
            <div class="nickName">快速找对象</div>
            <div class="showContent">无限制看信发信各项特权助你邂逅真爱</div>
          </div>
          <div class="tips"></div>
          <button class="btn" @mousedown="colorDown" @mouseup="colorUp">
            点击查看
          </button>
        </li>
        <li
          class="mailLi"
          @mouseleave="mouseleave"
          @mouseenter="mouseenter"
          v-for="(item, index) in userData"
          :key="index"
        >
          <div class="avatar">
            <img :src="item.img" alt="" />
          </div>
          <div class="inFo">
            <div class="nickName">{{ item.name }}</div>
            <div class="showContent">{{ item.showContent }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
          <div class="tips">1封未读</div>
          <button class="btn" @mousedown="colorDown" @mouseup="colorUp">
            点击查看
          </button>
          <div
            class="close"
            style="display: none"
            @click="deleteItem(index)"
          ></div>
        </li>
      </ul>
    </div>
    <div class="letterList" v-if="flag==='2'?true:false">
      <div class="img">
        <img src="@/assets/images/letter.png" alt="" />
      </div>
      <div class="text">
        服务流程五步走，六重保障觅珍爱<br />相亲无难事，珍爱有红娘！
      </div>
      <button class="btn letter" @mousedown="colorDown" @mouseup="colorUp" @click="$router.push('/vip')">了解珍爱红娘服务</button>
    </div>
  </div>
</template>

<script>
//43 41 54
export default {
  props:["flag"],
  data() {
    return {
      userData: [
        {
          img: "@/assets/images/portrait.png",
          name: "有点搞笑的茕茕",
          showContent: "大学本科 | 深圳",
          time: "昨天16:24",
        },
        {
          img: "@/assets/images/portrait.png",
          name: "番茄炒蛋 ",
          showContent: "163cm | 深圳",
          time: "昨天08:24",
        },
      ],
    };
  },
  name: "NavMessages",
  methods: {
    //点击按钮发生样式变化
    colorDown(e) {
      console.log(e.target);
      e.target.style =
        "background: linear-gradient(-38deg,rgba(133, 109, 241, 0.8), rgba(164, 104, 239, 0.9))";
    },
    colorUp(e) {
      console.log(e.target);
      e.target.style = "background: linear-gradient(-135deg, #856df1, #a468ef)";
    },
    //移入交友信息框
    mouseenter(e) {
      //console.log(e.target);
      e.target.style = "background:rgb(243,241,254)";
      e.target.lastElementChild.style = "display: block";
    },
    mouseleave(e) {
      // console.log(e);
      e.target.style = "background:#FFF";
      if (e.target.dataset.index) {
        e.target.lastElementChild.style = "display: none";
      }
    },
    //删除
    deleteItem(index) {
      //console.log(index);
      this.userData.splice(index, 1);
    },
    //点击切换tap

  },
};
</script>

<style lend="stylus">
.msg {
  font-size: 14px;
}
.msg .messageList .mailLi {
  position: relative;
  height: 130px;
  padding: 25px 50px 25px 20px;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}
.msg .messageList .mailLi .avatar {
  width: 80px;
  height: 80px;
  margin-right: 12px;
  border-radius: 6px;
  /* background-repeat: no-repeat; */
  background-size: 100% 100%;
  cursor: pointer;
  float: left;
}
.msg .messageList .mailLi .inFo {
  width: 500px;
  margin-right: 8px;
  float: left;
}
.msg .messageList .mailLi .inFo .nickName {
  height: 28px;
  padding-top: 4px;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}
.msg .messageList .mailLi .inFo .showContent {
  height: 16px;
  line-height: 16px;
  margin: 11px 0;
  color: #666;
}
.msg .messageList .mailLi .inFo .time {
  color: #ababab;
}
.msg .messageList .mailLi .tips {
  float: left;
  width: 95px;
  margin-right: 12px;
  margin-top: 37px;
  font-weight: 500;
  text-align: right;
  color: #666;
}
.msg .messageList .mailLi .btn,
.msg .letterList .btn {
  float: left;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  margin-top: 25px;
  background: rgb(139, 118, 249);
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  border: 0;
  outline: none;
}
.msg .messageList .mailLi .close {
  /* display: none; */
  position: absolute;
  right: 14px;
  top: 14px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-image: url(../../assets/images/close.png);
}
.msg .letterList {
  display: flex;
  flex-direction:column;
  justify-content:center;
  cursor: pointer;
}
.msg .letterList .img {
  width: 142px;
  height: 142px;
  margin: 0 auto;
  margin-top: 84px;
}
.msg .letterList .img img{
  width: 100%;
  height: 100%;
}
.msg .letterList .text {
  margin: 13px auto 60px auto;
  line-height: 21px;
  text-align: center;
  color: #333;
}
.msg .letterList .btn.letter {
  float: none;
  width: 198px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto 297px;
}
</style>
